<template>
  <div>
    <el-table :data="media.audioOutPutInfo.audios"  style="width: 100%"  @row-click='handleCurrentChanges' highlight-current-row>
      <el-table-column
        label="ID"
        prop="index">
      </el-table-column>
    </el-table>
    <setForm id="1" v-show="show">       
       <template slot="boxTop">{{$t('message.medias.audioMix')}}</template>
          <template slot="boxMain">      
            <el-row class="row-height" >
              <el-col :span="2">
                <span>{{ $t('message.medias.localAudioCh') }}</span>
              </el-col>
              <el-col :span="2" v-for="(item, index) in currentRow.locals" :key="index">
                <el-checkbox :label="index + ''" v-model="item.checked" disabled v-show="item.show"></el-checkbox>
              </el-col>
            </el-row>     
            <el-row class="row-height" >
              <el-col :span="2">
                <span>{{ $t('message.medias.remoteAudioCh') }}</span>
              </el-col>
              <el-col :span="2" v-for="(item, index) in currentRow.remotes" :key="index">
                <el-checkbox :label="index + ''" v-model="item.checked" disabled></el-checkbox>
              </el-col>
            </el-row>           
            <el-button  class="btnsave" v-if="false" @click="onSave">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
   
  </div>
</template>

<script>
import { api } from "../../../../libs/api";
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import ebus from "../../../../libs/ebus";
import { mapState } from "vuex";
import topTable from "../../../../components/topTable";
export default {
  created () {
    this.getCfg();
    // ebus.emit('getAudioOutInfo', this);
  },
  computed: {    
    ...mapState(["media","system"]),
  },
  data() {
    return {
      checked: true,
      labels: ['id', 'name', 'remote', 'local'],
      testData: {
        cnt: 6,
        audios: [
          {
            index: 0,
            srcAddr: ['local:0']
          },
          {
            index: 1,
            srcAddr: ['local:1']
          },
          {
            index: 2,
            srcAddr: ['local:2']
          },
          {
            index: 3,
            srcAddr: ['remote:3']
          },
          {
            index: 4,
            srcAddr: ['remote:4']
          },
          {
            index: 5,
            srcAddr: ['remote:5']
          },
        ]
      },
      switchs: [
        {
          outputCh: 0,
          name: 'Ch1',
          srcList: [
            {
              srcAddr: 'remote:0',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 1,
          name: 'Ch2',
          srcList: [
            {
              srcAddr: 'remote:1',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 2,
          name: 'Ch3',
          srcList: [
            {
              srcAddr: 'remote:2',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 3,
          name: 'Ch4',
          srcList: [
            {
              srcAddr: 'local:3',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 4,
          name: 'Ch5',
          srcList: [
            {
              srcAddr: 'local:4',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
        {
          outputCh: 5,
          name: 'Ch6',
          srcList: [
            {
              srcAddr: 'local:5',
              playAudio: true,
              playVideo: true,
            }
          ]
        },
      ],
      modes: [{
        name: this.$t('message.medias.manual'),
        value: 'manual'
      }, {
        name: this.$t('message.medias.automatic'),
        value: 'automatic'
      }],
      cfg: {
        mode: 'automatic',
        jitterTime: 0
      },
      currentRow: {
        index: 0,
        locals: [
          {
            readonly: true,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: false,
            checked: false
          }
        ],
        remotes: [
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          }
        ],
      },
      show: false
    }
  },
  components: {
    setForm,
    mylist,
    topTable
  },
  methods: {
    handleCurrentChanges(val, index) {  
      this.init();    
      
      for (var key in val) {
        this.currentRow[key] = val[key];
      }
      // var arr = [val.srcAddr]
      var arr = val.srcList
      arr.forEach(item => {             
        if (item.srcAddr.includes('local')) {   
          var srcIndex = parseInt(item.srcAddr.substr(item.srcAddr.indexOf(':') + 1)); 
          var currentRow  = this.currentRow;
          this.currentRow.locals[srcIndex].checked = true
        }
        if (item.srcAddr.includes('remote')) {
          var srcIndex = parseInt(item.srcAddr.substr(item.srcAddr.indexOf(':') + 1));
          this.currentRow.remotes[srcIndex].checked = true
        }
      })
      console.log()
      this.show = true;
    },
    hasRemote (index) {
      var res = false;
      if (this.currentRow.srcAddr && this.currentRow.srcAddr.length){
        this.currentRow.srcAddr.forEach(val => {
          if (val === `remote:${ index - 1}`) {
            res = true;
            return;
          }
        })
      }
      return res
    },
    hasLocal (index) {
      var res = false;
      if (this.currentRow.srcAddr && this.currentRow.srcAddr.length){
        this.currentRow.srcAddr.forEach(val => {
          if (val === `local:${ index - 1}`) {
            res = true;
            return;
          }
        })
      }
      return res
    },
    getCfg () {
      // api.onRequest(
      //   "$method.$get.zhishen.videoSwitch.cfg",
      //   null,
      //   null,
      //   null,
      //   function(message, reqReply) {
      //     var res = JSON.parse(message)
      //     if (res.code == 0) {  
      //       this.cfg.mode = res.data.mode;
      //       this.cfg.jitterTime = res.data.jitterTime;
      //     } else {
      //       this.showCodeMsg(res.code, this, res.msg);
      //     }     
      //   }.bind(this)
      // );
      ebus.emit('getAudioOutInfo', this);
    },
    onSave () {
      var arr = [];
      this.currentRow.locals.forEach((item, index) => {
        if (item.checked) {
          arr.push({srcAddr: `local:${index}`})
        }
      })
      this.currentRow.remotes.forEach((item, index) => {
        if (item.checked) {
          arr.push({ srcAddr: `remote:${index}` })
        }
      })
      for(var i = 0; i < 10; i++) {
        if(!arr[i]) {
          arr[i] = { srcAddr: ''}
        }
      }
      var option = {
        srcList: arr  
      };
      api.onRequest(
        `$method.$set.${this.system.curTopic}.ao.ch.${this.currentRow.index}.cfg`,
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          this.getCfg();  
        }.bind(this)
      );
    },
    init () {
      this.currentRow = {
        index: 0,
        locals: [
          {
            readonly: true,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: false,
            checked: false
          }
        ],
        remotes: [
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          },
          {
            readonly: false,
            show: true,
            checked: false
          }
        ],
      }
    }
  }
};
</script>

<style scoped>
.row-height {
  height: 36px;
}
</style>

